<template>
    <div v-tc-height="'100%'" class="threeS-body-container">
        <!-- 输入框 -->
        <div
            :class="[
                'threeS-search-container',
                { 'threeS-search-hover': mouseEnter },
                { 'threeS-search-active': glass },
            ]"
            @mouseenter="handleMouseEvent"
            @mouseleave="handleMouseEvent"
        >
            <div class="threeS-search-body">
                <input
                    class="threeS-search-input"
                    type="text"
                    :placeholder="glass ? '' : '搜索内容'"
                    @focus="handleFocus"
                    v-model="searchValue"
                    @keyup.enter="handleSearch"
                />
                <button
                    v-if="glass"
                    class="icon iconfont icon-magnifier search-icon"
                    @click="handleSearch"
                ></button>
            </div>
        </div>
        <!-- 搜索类型 -->
        <div
            :class="[
                'threeS-search-type-container',
                { 'threeS-type-focus': glass },
            ]"
        >
            <div
                class="threeS-search-type"
                :class="[{ 'is-active': item.id === searchType }]"
                v-for="item in searchTypeList"
                :key="item.id"
                @click="handleSearchType(item)"
            >
                {{ item.name }}
            </div>
        </div>
        <!-- 历史记录 -->
        <div :class="['threeS-extend-container', { 'is-active': glass }]">
            <!-- 历史记录 -->
            <div class="threeS-search-history" v-if="glass">
                <div class="threeS-history-title">
                    <h3>搜索历史</h3>
                    <span @click="clearHistory">清除</span>
                </div>
                <div class="threeS-history-main">
                    <template v-if="historyList.length > 0">
                        <div
                            class="three-history-item"
                            v-for="(item, index) in historyList"
                            :key="index"
                        >
                            <span @click.self="goHistoryUrl(item)">{{
                                item.name
                            }}</span>
                            <div
                                class="threeS-lab-clear"
                                @click="handleClearHistory(item)"
                            >
                                x
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <span class="threeS-history-default">无历史记录</span>
                    </template>
                </div>
            </div>

            <!-- 热门记录 -->
            <div class="threeS-search-hot" v-if="glass">
                <div class="threeS-hot-title">
                    <h3>热搜</h3>
                </div>
                <ul class="threeS-hot-main">
                    <li
                        v-for="(item, index) in hotNews"
                        :key="index"
                        @click="goHotUrl(item)"
                    >
                        <div
                            :class="[
                                'threeS-hot-num',
                                {
                                    'is-first': index === 0,
                                    'is-second': index === 1,
                                    'is-third': index === 2,
                                },
                            ]"
                        >
                            {{ index + 1 }}
                        </div>
                        <div class="threeS-hot-text">{{ item.name }}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, Ref, ref, computed, watch } from "vue";
import { searchType } from "./interface/interface";
import { useStore, Store, ActionMethod } from "vuex";
import { urlInterface } from "@/api/data.interface";

import loadsh from "loadsh";

export default defineComponent({
    props: {
        glass: {
            type: Boolean,
            default: false,
        },
    },
    setup(props, context) {
        const mouseEnter: Ref<boolean> = ref(false);
        const searchValue: Ref<string> = ref("");

        // 获取vuex信息
        const store: Store<any> = useStore();

        // 热点新闻
        const hotNews: any = ref([]);
        // 搜索历史
        const historyList: any = ref([]);

        let timer: any = null;
        function handleMouseEvent() {
            if (timer) {
                clearTimeout(timer);
                timer = null;
                mouseEnter.value = false;
                return false;
            }
            timer = setTimeout(() => {
                mouseEnter.value = true;
            }, 100);
        }

        function handleFocus(): void {
            context.emit("changeFocus", true);
        }

        // 清空输入框内容
        watch(
            () => props.glass,
            (value) => {
                if (value) return false;

                searchValue.value = "";
            }
        );

        const searchTypeList: searchType[] = [
            {
                name: "百度",
                id: "baidu",
                url: "https://www.baidu.com/s?wd=",
            },
            {
                name: "谷歌",
                id: "google",
                url: "https://www.google.com/search?q=",
            },
            {
                name: "必应",
                id: "bing",
                url: "https://cn.bing.com/search?q=",
            },
            {
                name: "淘宝",
                id: "taobao",
                url: "https://s.taobao.com/search?q=",
            },
        ];
        const searchType: Ref<string> = ref(searchTypeList[0].id);
        const searchUrl: Ref<string> = ref(searchTypeList[0].url);

        function handleSearchType(item: searchType): void {
            searchType.value = item.id;
            searchUrl.value = item.url;
        }

        // ---------- 历史信息 start ----------
        const getHistoryInfo: any = computed(
            () => store.getters["basic/basic/getHistory"]
        );

        watch(
            () => getHistoryInfo.value,
            (value) => {
                historyList.value = value;
            }
        );

        const updateHistory: ActionMethod = (history: urlInterface[]) =>
            store.dispatch("basic/basic/updateHistoryInfo", history);

        /**
         * 清除历史记录
         * @param {Object} item 待清除的项
         */
        function handleClearHistory(item: urlInterface): void {
            const newHistoryInfo: urlInterface[] = getHistoryInfo.value.filter(
                (el: urlInterface) => {
                    return el.url !== item.url;
                }
            );

            // 更新
            updateHistory(newHistoryInfo);
        }

        function goHistoryUrl(item: urlInterface): void {
            window.open(item.url);
        }

        /**
         * 清除全部历史记录
         */
        function clearHistory() {
            // 更新
            updateHistory([]);
        }
        // ---------- 历史信息 end ----------

        // ---------- 执行搜索 start ----------
        function handleSearch(): void {
            // 是否已存在
            const newHistory = getHistoryInfo.value.filter(
                (el: urlInterface) => {
                    return el.url !== searchUrl.value + searchValue.value;
                }
            );

            // 更新历史记录
            store.dispatch("basic/basic/updateHistoryInfo", [
                {
                    id: String(new Date().getTime()) + "-threeS-history",
                    name: searchValue.value,
                    url: searchUrl.value + searchValue.value,
                },
                ...newHistory,
            ]);

            // 执行跳转
            window.open(searchUrl.value + searchValue.value);
        }
        // ---------- 执行搜索 end ----------

        // ---------- 热门信息 start ----------
        const getHotInfo = computed(() => store.getters["basic/basic/getHot"]);

        watch(
            () => getHotInfo.value,
            (value) => {
                if (loadsh.isEmpty(value) || !Array.isArray(value)) {
                    return false;
                }
                hotNews.value = value.length > 8 ? value.slice(0, 8) : value;
            }
        );

        function goHotUrl(item: urlInterface): void {
            window.open(item.url);
        }
        // ---------- 热门信息 end ----------

        return {
            mouseEnter,
            handleMouseEvent,
            handleFocus,
            searchValue,
            handleSearch,
            searchTypeList,
            searchType,
            handleSearchType,
            hotNews,
            goHotUrl,
            clearHistory,
            historyList,
            goHistoryUrl,
            handleClearHistory,
        };
    },
});
</script>

<style scoped lang="less">
.threeS-body-container {
    position: relative;
    @activeWidth: 40rem;
    .threeS-search-container {
        position: relative;

        width: 22rem;
        height: 100%;
        transition: width 0.2s;

        z-index: 10;
        .threeS-search-body {
            position: relative;

            width: 100%;
            height: 100%;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;

            background-color: rgba(255, 255, 255, 0.3);
            transition: background-color 0.2s;
            .threeS-search-input {
                position: relative;

                width: calc(~"100% - 100px");
                height: 100%;
                border: 0;
                box-sizing: border-box;
                padding: 12px;

                background-color: transparent;
                outline: none;
                text-align: center;
                font-size: 1rem;
            }
            .threeS-search-input::-webkit-input-placeholder {
                color: rgba(255, 255, 255, 0.8);
                font-size: 0.95rem;
            }
            .search-icon {
                position: absolute;
                right: 0;

                width: 50px;
                height: 100%;

                background-color: transparent;
                color: rgba(82, 82, 82, 0.7);
                font-size: 1.2rem;
                border: 0;
                transition: color 0.2s;
            }
            .search-icon:hover {
                cursor: pointer;
                color: rgba(82, 82, 82, 0.9);
            }
        }
    }
    .threeS-search-hover.threeS-search-container {
        width: @activeWidth;
        .threeS-search-body {
            background-color: rgba(255, 255, 255, 0.4);
            .threeS-search-input {
                color: #333333;
            }
            .threeS-search-input::-webkit-input-placeholder {
                color: rgba(255, 255, 255, 1);
                font-size: 0.95rem;
            }
        }
    }
    .threeS-search-active.threeS-search-container {
        width: @activeWidth;
        .threeS-search-body {
            background-color: rgba(255, 255, 255, 1);
            .threeS-search-input {
                color: #333333;
            }
        }
    }

    .threeS-search-type-container {
        position: absolute;
        top: 0;

        display: flex;
        align-items: center;

        opacity: 0;
        transition: all 0.2s;
        z-index: 5;

        .threeS-search-type {
            position: relative;

            margin-right: 12px;
            padding: 6px 20px;
            border-radius: 16px;

            background-color: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .threeS-search-type:hover {
            background-color: rgba(255, 255, 255, 0.5);
            color: #ffffff;
        }
        .threeS-search-type.is-active {
            background-color: rgba(255, 255, 255, 0.5);
            color: #ffffff;
        }
    }

    .threeS-search-type-container.threeS-type-focus {
        top: -44px;

        opacity: 1;
    }

    .threeS-extend-container {
        position: absolute;
        top: 4rem;

        width: 22rem;
        height: 0;
        border-radius: 14px;

        background-color: rgba(255, 255, 255, 1);
        opacity: 0;
        transition: all 0.2s;

        .threeS-search-history {
            position: relative;

            width: 100%;
            height: 100px;
            box-sizing: border-box;
            padding: 8px 14px;

            .threeS-history-title {
                position: relative;

                width: 100%;
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                h3 {
                    color: #333333;
                    font-size: 1.1rem;
                    font-weight: bold;
                }

                span {
                    color: #999999;
                    letter-spacing: 1px;
                    font-size: 0.875rem;
                    cursor: pointer;
                    transition: 0.2s;
                }
                span:hover {
                    color: #666666;
                }
            }

            .threeS-history-main {
                position: relative;

                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 0 4px;

                overflow: hidden;
                .three-history-item {
                    position: relative;

                    max-width: 6.875rem;
                    height: 32px;
                    line-height: 32px;
                    padding-left: 12px;
                    padding-right: 12px;
                    border-radius: 4px;
                    box-sizing: border-box;
                    margin-right: 10px;

                    background-color: #f3f3f3;

                    transition: all 0.2s;

                    span {
                        position: relative;

                        display: block;
                        color: #666666;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        word-break: keep-all;
                        cursor: pointer;
                    }
                    .threeS-lab-clear {
                        position: absolute;
                        top: -6px;
                        right: -6px;

                        display: none;
                        width: 16px;
                        height: 16px;
                        box-sizing: border-box;
                        padding-left: 1px;
                        padding-top: -1px;

                        line-height: 15px;
                        text-align: center;
                        border-radius: 50%;
                        background-color: #c9c9c9;
                        color: #ffffff;
                        font-size: 12px;
                        cursor: pointer;

                        transition: background-color 0.2s;
                    }
                    .threeS-lab-clear:hover {
                        background-color: #b8b8b8;
                    }
                }
                .three-history-item:hover {
                    background-color: #f3f3f3;
                    span {
                        color: #07abe2;
                    }

                    .threeS-lab-clear {
                        display: block;
                    }
                }

                .threeS-history-default {
                    position: relative;

                    display: inline-block;
                    width: 100%;
                    height: 100%;

                    line-height: 50px;
                    text-align: center;
                    font-size: 12px;
                    color: #999999;
                }
            }
        }

        .threeS-search-hot {
            position: absolute;
            top: 100px;
            right: 14px;
            bottom: 8px;
            left: 14px;

            .threeS-hot-title {
                position: relative;

                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;

                h3 {
                    color: #333333;
                    font-size: 1.1rem;
                    font-weight: bold;
                }
            }

            .threeS-hot-main {
                position: relative;

                width: 100%;
                height: calc(~"100% - 40px");
                display: flex;
                flex-wrap: wrap;
                box-sizing: border-box;
                flex-direction: column;
                padding: 0 4px;

                overflow: hidden;
                li {
                    position: relative;

                    width: 50%;
                    height: 40px;
                    display: flex;

                    cursor: pointer;

                    .threeS-hot-num {
                        position: relative;

                        width: 26px;
                        height: 26px;
                        margin-top: 7px;
                        border-radius: 4px;

                        text-align: center;
                        line-height: 26px;
                        background-color: #ececec;
                        font-style: italic;
                    }
                    .is-first.threeS-hot-num {
                        background-color: #07abe2;
                        font-weight: bold;
                        color: #ffffff;
                    }
                    .is-second.threeS-hot-num {
                        background-color: #07abe2;
                        font-weight: bold;
                        color: #ffffff;
                    }
                    .is-third.threeS-hot-num {
                        background-color: #07abe2;
                        font-weight: bold;
                        color: #ffffff;
                    }

                    .threeS-hot-text {
                        position: relative;

                        width: calc(~"100% - 50px");
                        height: 100%;
                        box-sizing: border-box;
                        padding: 0 10px;
                        margin-left: 10px;

                        line-height: 40px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        transition: all 0.2s;
                    }
                    .threeS-hot-text:hover {
                        background-color: #f5f5f5;
                        color: #07abe2;
                    }
                }
            }
        }
    }
    .threeS-extend-container.is-active {
        width: @activeWidth;
        height: 320px;
        opacity: 1;
    }
}
</style>
